<template>
<div>
  <div>
    <el-input
        placeholder="添加职称等级"
        v-model="jl.name"
        clearable
       style="width: 300px"
        suffix-icon="el-icon-plus"
    size="small">
    </el-input>
    <el-select v-model="jl.titleLevel" placeholder="职称等级..."
               style="margin: 0 15px 0"
               @keydown.enter.native="addJoblevel"
    size="small">
      <el-option
          v-for="item in titleLevels"
          :key="item"
          :label="item"
          :value="item">
      </el-option>
    </el-select>
    <el-button size="small" type="primary" icon="el-icon-plus" @click="addJoblevel">添加</el-button>
  </div>
  <div>
    <el-table
        :data="jls"
        stripe
        style="width: 100%;margin-top: 20px"
        border
        size="small"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="职称名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="titleLevel"
          label="职称等级">
      </el-table-column>
      <el-table-column
          prop="createDate"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="enabled"
          label="是否启用">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.enabled === true">启用</el-tag>
          <el-tag type="danger" v-else>未启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="showDialog(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="removeJoblevel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog
      title="编辑职称"
      :visible.sync="dialogVisible"
      width="30%">
    <div>
      <tr>
        <td><el-tag>职称名称：</el-tag></td>
        <td><el-input v-model="updateJl.name" style="margin-left: 8px"></el-input></td>
      </tr>
      <tr style="display:inline-block;margin-top: 10px">
        <td><el-tag>职称等级：</el-tag></td>
        <td> <el-select v-model="updateJl.titleLevel" placeholder="职称等级..." style="margin-left: 8px">
          <el-option
              v-for="item in titleLevels"
              :key="item"
              :label="item"
              :value="item">
          </el-option>
        </el-select></td>
      </tr>
      <tr style="display:inline-block;margin-top: 10px">
        <td><el-tag>是否启用：</el-tag></td>
        <td> <el-switch
            v-model="updateJl.enabled"
            active-text="启用"
            inactive-text="未启用">
        </el-switch></td>
      </tr>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateJoblevel">确 定</el-button>
  </span>
  </el-dialog>
  <div>
    <el-button type="danger"
               icon="el-icon-delete"
               style="margin-top: 20px"
               @click="deleteBatches"
    :disabled="this.multipleSelection.length === 0">批量删除</el-button>
  </div>
</div>
</template>

<script>
export default {
name: "JoblevelMana",
  data(){
  return{
    dialogVisible:false,
    multipleSelection:[],
    ids:[],
    names:[],
    jl:{
      name:'',
      titleLevel:''
    },
    titleLevels: ["正高级", "副高级", "中级", "初级", "员级"],
    jls:[],
    updateJl:{
      name:'',
      titleLevel:'',
      enabled:false
    }
  }
  },
  methods:{
    deleteBatches(){
      for(let i = 0; i< this.multipleSelection.length; i++){
        this.ids.push(this.multipleSelection[i].id)
        this.names.push(this.multipleSelection[i].name)
      }
      this.$confirm('是否要删除职称, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/system/basic/joblevel/delete/ids?ids='+this.ids).then(res=>{
          if(res){
            this.initJoblevel()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  handleSelectionChange(val){
    this.multipleSelection = val;
    },
  initJoblevel(){
    this.getRequest('/system/basic/joblevel/list').then(res=>{
      if(res){
        this.jls = res
      }
    })
  },
   addJoblevel(){
    this.postRequest('/system/basic/joblevel/add',this.jl).then(res=>{
      if(res){
        this.initJoblevel()
        this.jl.name = ''
        this.jl.titleLevel = ''
      }else {
        this.$message('请输入职称名称')
      }
    })
    },
    removeJoblevel(row){
      this.$confirm('是否要删除' + row.name + '职称, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/system/basic/joblevel/delete?id='+row.id).then(res=>{
          if(res){
            this.initJoblevel()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    showDialog(row){
    this.dialogVisible = true
      Object.assign(this.updateJl,row)
    },
    updateJoblevel(){
    this.postRequest('/system/basic/joblevel/udate',this.updateJl).then(res=>{
      if(res){
        this.initJoblevel()
        this.dialogVisible = false
      }
    })
    }
  },
  mounted() {
  this.initJoblevel()
  }
}
</script>

<style scoped></style>